<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="filter-container">
          <el-form size="small" label-width="120px" :inline="true">
            <el-form-item label="时间选择：" class="mr10">
              <el-date-picker
                v-model="timeVal"
                type="daterange"
                align="right"
                unlink-panels
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy/MM/dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onchangeTime"
              />
            </el-form-item>
          </el-form>
        </div>
        <cards-data :card-lists="cardLists" />
        <el-tabs v-if="headeNum.length > 0" v-model="tableForm.type" @tab-click="getList(1)">
            <el-tab-pane v-for="(item,index) in headeNum" :key="index" :name="item.type.toString()" :label="item.title" />
        </el-tabs>
      </div>
	  
	  
	    <div v-if="tableForm.type==''||tableForm.type==0||tableForm.type==1"> 
		
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        class="table"
        highlight-current-row
      >  
	  
				<el-table-column label="序号" min-width="90">
					<template scope="scope">
						<span>{{ scope.$index+(tableForm.page - 1) * tableForm.limit + 1 }}</span>
					</template>
				</el-table-column>
				
				<el-table-column
				  prop="create_time"
				  label="创建时间"
				  min-width="150"
				/>
				
				<el-table-column
				  prop="order_id"
				  label="订单编号"
				  width="150"
				/>
				
			   <el-table-column
				  prop="uid"
				  label="会员ID"
				  width="80"
				/>
				<el-table-column
				  prop="nickname"
				  label="昵称"
				  min-width="130"
				/>	 
				<el-table-column
				  label="支付金额"
				  min-width="100"
				  prop="price"
				/>
				<el-table-column
				  prop="zhuli_price"
				  label="助力收入"
				  min-width="120"
				/>
				<el-table-column
				  prop="money"
				  label="助力金"
				  min-width="120"
				/>
				
	<!-- 			<el-table-column
				  prop="money"
				  label="助力类型"
				  min-width="120"
				/> -->
			
			
				<el-table-column
				  prop="mer_id"
				  label="商家id"
				  min-width="100"
				/>
				
				<el-table-column
				  prop="rate"
				  label="折扣比例"
				  min-width="100"
				/>
				
			
			<el-table-column
			  prop="pay_time"
			  label="支付时间"
			  min-width="150"
			/>
				
				
				<el-table-column label="状态" min-width="100">
				  <template slot-scope="scope">
					<span v-if="scope.row.status === 0">
					排队中
					</span>
					<span v-else>交易汇总</span>
				  </template>
				</el-table-column>
				
				<el-table-column label="助力金类型" min-width="100">
				  <template slot-scope="scope">
					<span v-if="scope.row.type === 1">
					用户
					</span>
					<span v-else>商家</span>
				  </template>
				</el-table-column>
				
				
			
							

			  </el-table>
		
			
		
		
		
		</div>
		<div v-else>
			<el-table
			  v-loading="listLoading"
			  :data="tableData.data"
			  style="width: 100%"
			  size="mini"
			  class="table"
			  highlight-current-row
			>  
			<el-table-column label="序号" min-width="90">
					<template scope="scope">
						<span>{{ scope.$index+(tableForm.page - 1) * tableForm.limit + 1 }}</span>
					</template>
			</el-table-column>
			
			<el-table-column
			  prop="create_time"
			  label="创建时间"
			  min-width="150"
			/>
			
			<el-table-column
			  prop="link_id"
			  label="订单编号"
			  width="150"
			/>
			
			 
			<el-table-column
					  prop="uid"
					  label="会员ID"
					  width="80"
					/>
			
			<el-table-column
			  prop="nickname"
			  label="昵称"
			  min-width="130"
			/>
			 <el-table-column
			   prop="number"
			   label="数量"
			   min-width="120"
			 />
			 <el-table-column
			   label="标题"
			   min-width="100"
			   prop="title"
			 />
			 <el-table-column
			   prop="mark"
			   label="备注"
			   min-width="200"
			 />
			  </el-table>
		
		</div>
		
		
      <div class="block mb20">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableForm.limit"
          :current-page="tableForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { billListApiZhuli, financialDetailApi, finaHeaderDataCoinApiZhuli } from '@/api/accounts'
import { roterPre } from '@/settings'
import cardsData from "@/components/cards/index";
export default {
  name: 'Record',
  components: { cardsData },
  data() {
    return {
      loading: false,
      roterPre: roterPre,
      timeVal: [],
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      tableForm: {
        page: 1,
        limit: 10,
        date: '',
        type: '1',
      },
      ruleForm: {
        status: '0'
      },
      headeNum: [
          {type: '1',title: "交易汇总"},
          {type: '0',title: "代付明细"},
		  {type: '2',title: "收入明细"},
		  {type: '3',title: "已付明细"},
      ],
      dialogVisible: false,
      rules: {
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      reconciliationId: 0,
      cardLists: [],
      accountDetails: {
        date: '',
        charge: {},
        expend: {},
        income: {}
      }
    }
  },
  computed: {

  },
  mounted() {
    this.getList('')
    this.getHeaderData()
  },
  methods: {
    onDetails(date) {
      financialDetailApi(this.tableForm.type,{date: date}).then(res => {
        this.dialogVisible = true
        this.accountDetails = res.data
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    getHeaderData(){
       finaHeaderDataCoinApiZhuli({date:this.tableForm.date}).then(res => {
           this.cardLists = res.data
       }).catch(res => {
         this.$message.error(res.message)
       })
    },
    //下载账单
    downloadAccounts(time){
        downloadFinancialApi(this.tableForm.type,{date: time})
            .then((res) => {
                const h = this.$createElement;
                this.$msgbox({
                    title: '提示',
                    message: h('p', null, [
                      h('span', null, '文件正在生成中，请稍后点击"'),
                      h('span', { style: 'color: teal' }, '导出记录'),
                      h('span', null, '"查看~ '),
                ]),
                confirmButtonText: '我知道了',
                }).then(action => {
                    this.$router.push(`${roterPre}/group/exportList`);
                });
            }).catch((res) => {
                this.$message.error(res.message);
            });

    },
    handleClose() {
      this.dialogVisible = false
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableForm.date = this.timeVal ? this.timeVal.join('-') : ''
      this.getList('')
      this.getHeaderData()
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.tableForm.page = num ? num : this.tableForm.page;
      billListApiZhuli(this.tableForm).then(res => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
        this.listLoading = false
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableForm.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableForm.limit = val
      this.chkName = ''
      this.getList('')
    }
  }
}
</script>

<style lang="scss" scoped>
  .selWidth{
    width: 300px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 12px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
  }
  .el-menu-item{
      font-weight: bold;
      color: #333;
  }
  /deep/.el-dialog__header{
      text-align: left;
  }
  .el-col{
      position: relative;
      .el-divider--vertical{
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        margin: 0;
       }
  }
  .grid-content{
      padding: 0 15px;
      display: block;
      .title,.color_red,.color_gray{
        display: block;
        line-height: 20px;
      }
      .color_red{
        color: red;
        font-weight: bold;
      }
      .color_gray{
        color: #333;
        font-weight: bold;
      }
     .count{
         font-size: 12px;
     }
     .list{
         margin-top: 20px;
         .item{
             overflow: hidden;
             margin-bottom: 10px;
         }
         .name,.cost{
             line-height: 20px;
         }
         .cost{
             text-align: right;
             span{
                 display: block;
             }
         }
         .name,.cost_count{
             font-size: 12px;
         }
         .cost_count{
             margin-top: 10px;
         }
         .cost_num{
             font-weight: bold;
             color: #333;
         }
     }

  }

</style>
